<template>
  <div class="dashboard-container">
    <!-- 组织架构概览 -->
    <div class="chart-section">
      <h3 class="section-title">组织架构概述</h3>
      <cards :cardList="cardList" />
    </div>

    <!-- 基础数据图表区块 -->
    <div class="chart-section">
      <h3 class="section-title">经营数据看板</h3>
      <div class="chart-group">
        <div class="chart-card">
          <div class="chart-header">
            <span class="chart-icon">📊</span>
            <h4 class="chart-name">公司本周盈利汇总</h4>
          </div>
          <div ref="columnar" class="chart-container"></div>
        </div>

        <div class="chart-card">
          <div class="chart-header">
            <span class="chart-icon">🌡️</span>
            <h4 class="chart-name">水电与温度关系图</h4>
          </div>
          <div ref="brokenLine" class="chart-container"></div>
        </div>

        <div class="chart-card">
          <div class="chart-header">
            <span class="chart-icon">🌍</span>
            <h4 class="chart-name">世界人口分布占比图</h4>
          </div>
          <div ref="roundCake" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 优化样基础数据图表区块 -->
    <div class="chart-section">
      <h3 class="section-title">销售数据看板</h3>
      <div class="chart-group">

        <div class="chart-card">
          <div class="chart-header">
            <span class="chart-icon">📈</span>
            <h4 class="chart-name">品牌销售统计</h4>
          </div>
          <div ref="beautybrokenLine" class="chart-container"></div>
        </div>

        <div class="chart-card">
          <div class="chart-header">
            <span class="chart-icon">⚖️</span>
            <h4 class="chart-name">销售地区占比图</h4>
          </div>
          <div ref="beautyroundCake" class="chart-container"></div>
        </div>

      </div>
    </div>

    <!-- 混合数据图表区块 -->
    <div class="chart-section">
      <h3 class="section-title">环境数据监测</h3>
      <div class="mixed-chart">
        <div ref="weather" class="combined-chart"></div>
      </div>
    </div>
    

  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import type { ECharts, EChartsOption } from 'echarts';
import { statsObject, cardObject } from '../../utils/type';
import cards from './component/cards.vue';
export default defineComponent({
  name: 'reviewsConfiguration',
  components: { cards },
  setup() {
    let cardList: cardObject[] = reactive(
      [
        {
          value: 100,
          label: '部门',
          icon: 'fas fa-sitemap',
          style: {
            'background': 'linear-gradient(to bottom right, #3b82f6, #60a5fa)',
          },
        },
        {
          value: 50,
          label: '在职员工',
          icon: 'fas fa-users',
          style: {
            'background': 'linear-gradient(to bottom right, #10b981, #34d399)',
          },
        },
        {
          value: 20,
          label: '实习员工',
          icon: 'fas fa-user-graduate',
          style: {
            'background': 'linear-gradient(to bottom right, #8b5cf6, #a78bfa)',
          },
        },
        {
          value: 30,
          label: '空缺职位',
          icon: 'fas fa-briefcase',
          style: {
            'background': 'linear-gradient(to bottom right, #f97316, #fb923c)',
          },
        },
        {
          value: 200,
          label: '订单',
          icon: 'iconfont icon-dingdan',
          style: {
            'background': 'linear-gradient(to bottom right, #9E87FF, #73DDFF)',
          },
          trend: 10,
        },
        {
          value: 100,
          label: '用户',
          icon: 'iconfont icon-yonghu',
          style: {
            'background': 'linear-gradient(to bottom right, #F56948, #fe9a8b)',
          },
        },
      ]
    );

    let stats: statsObject = reactive({
      departments: 10,
      employees: 50,
      interns: 20,
      vacancies: 30
    });

    const columnar = ref<HTMLElement | null>(null);
    const brokenLine = ref<HTMLElement | null>(null);
    const roundCake = ref<HTMLElement | null>(null);
    const beautyroundCake = ref<HTMLElement | null>(null);
    const beautybrokenLine = ref<HTMLElement | null>(null);
    const weather = ref<HTMLElement | null>(null);

    // 存储图表实例的引用
    let columnarChart: ECharts | null = null;
    const getEchartData = () => {
      //公司本周盈利汇总
      if(!!columnar.value){
        const myColumnar = echarts.init(columnar.value)
        let data1 = [320, 332, 301, 334, 390, 330, 320];
        let data2 = [220, 182, 191, 234, 290, 330, 310];
        let data3 = [150, 232, 201, 154, 190, 330, 410];
        const titleColumns: string[] = ['订单', '金额', '访问量'];

        const option:  EChartsOption = {
          legend: <echarts.LegendComponentOption>{
            data: titleColumns,
            orient: 'horizontal',
            left: 'center'
          },

          tooltip: <echarts.TooltipComponentOption>{
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },

          toolbox: <echarts.ToolboxComponentOption>{
            feature: {
              saveAsImage: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              dataZoom: { show: true }
            },
            right: '5%',
            top: '5%',
          },

          itemStyle: {
            borderRadius: [6, 6, 0, 0],
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 8,
            shadowOffsetY: 3
          },

          // dataset: <echarts.DatasetComponentOption>{
          //   source: [
          //     ['周一', 43.3, 60, 66],
          //     ['周二', 83.1, 73.4, 77],
          //     ['周三', 86.4, 65.2, 55.6],
          //     ['周四', 72.4, 53.9, 57.9],
          //     ['周五', 82.4, 53.9, 89.1],
          //     ['周六', 42.4, 53.9, 210],
          //     ['周日', 72.4, 53.9, 78.99]
          //   ]
          // },

          xAxis: <echarts.XAXisComponentOption[]>[
            { mainType: 'category', axisTick: { alignWithLabel: true }, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
            // { type: 'category', axisTick: { alignWithLabel: true } },
            // { type: 'category', axisTick: { alignWithLabel: true } }
          ],

          yAxis: <echarts.YAXisComponentOption>[{ type: 'value' }],

          series: <echarts.SeriesOption[]>[
            {
              name: '订单',
              type: 'bar',
              itemStyle: { color: '#5CDBD3' },
              data: data1
            },
            {
              name: '金额',
              type: 'bar',
              itemStyle: { color: '#95DE64' },
              data: data2
            },
            {
              name: '访问量',
              type: 'bar',
              itemStyle: { color: '#FFC53D' },
              data: data3
            }
          ],
          dataZoom: <echarts.DataZoomComponentOption[]>[{ type: 'inside', start: 0, end: 100 }]
        };
        const run = () => {
          for (var i = 0; i < data1.length; ++i) {
            data1[i] += 50;
            data2[i] += 40;
            data3[i] += 30;
          };
          myColumnar.setOption({
            series: [
              {
                name: '订单',
                type: 'bar',
                itemStyle: { color: '#5CDBD3' },
                data: data1
              },
              {
                name: '金额',
                type: 'bar',
                itemStyle: { color: '#95DE64' },
                data: data2
              },
              {
                name: '访问量',
                type: 'bar',
                itemStyle: { color: '#FFC53D' },
                data: data3
              }
            ]
          });
        };

        try{
          //页面加载时触发一次
          setTimeout(() => {
            run();
          }, 0);
          //每隔3秒执行一次
          setInterval(function () {
            run();
          }, 3000);
        }catch(e){
          throw e;
        }
        echarts.init(columnar.value).setOption(option);
      }

      //水电与温度关系图
      if(!!brokenLine.value){
        const colors = ['#1E90FF', '#91CC75', '#EE6666', 'rgba(255, 173, 177, 0.6)'];
        const option:  EChartsOption = {
          title: {
            text: '',
          },
          legend: <echarts.LegendComponentOption>{
            data: ['温度', '用电量', '用水量'],
            orient: 'horizontal',
            left: '10%',
          },
          tooltip: <echarts.TooltipComponentOption>{
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
          },
          toolbox: <echarts.ToolboxComponentOption>{
            feature: {
              saveAsImage: { show: true }, //保存图片
              dataView: { show: true, readOnly: false }, //数据视图
              magicType: { show: true, type: ['line', 'bar'] }, //动态切换
              restore: { show: true }, //还原
              dataZoom: { show: true } // 数据区域缩放
            },
            right: '5%',
          },
          grid: <echarts.GridComponentOption>{
            left: '10%',  // 距离左侧的距离
            right: '20%', // 距离右侧的距离
            top: '25%',   // 距离顶部的距离
            bottom: '20%' // 距离底部的距离
          },
          xAxis: <echarts.XAXisComponentOption[]>[
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            },
          ],
          yAxis: <echarts.YAXisComponentOption[]>[
            {
              type: 'value',
              name: '温度',
              position: 'left',
              alignTicks: true,
              // 设置温度坐标轴的颜色
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[2],
                }
              },
              // 设置温度坐标轴的标签的格式
              axisLabel: {
                formatter: '{value} °C'
              },
            },

            {
              type: 'value',
              name: '用电量',
              position: 'right',
              alignTicks: true,
              // 设置用电量坐标轴的颜色
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1],
                }
              },
              // 设置用电量坐标轴的标签的格式
              axisLabel: {
                formatter: '{value} kw'
              },
            },

            {
              type: 'value',
              name: '用水量',
              position: 'right',
              alignTicks: true,
              offset: 60, //增加离图标距离
              // 设置用水量坐标轴的颜色
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0],
                }
              },
              // 设置用水量坐标轴的标签的格式
              axisLabel: {
                formatter: '{value} m³',
              },
            },
          ],
          series: <echarts.SeriesOption[]>[
            {
              name: '温度',
              type: 'line',
              yAxisIndex: 0,
              itemStyle: {
                color: colors[2] // 设置温度折线图的颜色
              },
              data: [10, 18, 22, 15, 19, 25, 29],
            },
            {
              name: '用电量',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                color: colors[1] // 设置用电量折线图的颜色
              },
              data: [30, 22, 18, 6, 15, 25, 40],
            },
            {
              name: '用水量',
              type: 'bar',
              yAxisIndex: 2,
              itemStyle: {
                color: colors[0] // 设置用水量折线图的颜色
              },
              data: [5, 2, 3, 4, 6, 3, 7],
            },
          ],
          dataZoom: <echarts.DataZoomComponentOption[]>[{ type: 'inside', start: 0, end: 100 }],
        };
        echarts.init(brokenLine.value).setOption(option);
      }

      //世界人口分布占比图
      if(!!roundCake.value){
        const colors = ['#1E90FF', '#91CC75', '#EE6666', '#FFA07A', '#FFD700'];//设置每一个饼块的颜色
        const option: EChartsOption = {
          title: {
            text: '',
          },
          tooltip: <echarts.TooltipComponentOption>{
            trigger: 'item',
          },
          toolbox: <echarts.ToolboxComponentOption>{
            feature: {
              saveAsImage: { show: true }, // 保存为图片
              dataView: { show: true, readOnly: false }, // 数据视图
            },
            right: '20%',
          },
          visualMap: <echarts.VisualMapComponentOption>{
            show: true,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },

          series: <echarts.SeriesOption[]>[
            {
              name: '世界人口分配',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              roseType: 'radius',
              itemStyle: {
                // borderRadius: 8,
                // borderWidth: 2,
                borderColor: '#fff',
                color: function(params){
                  return colors[params.dataIndex];
                },
                shadowBlur: 200,
                shadowColor: 'rgba(255, 173, 177, 1)'
              },
              data: [
                { value: 335, name: '非洲' },
                { value: 310, name: '欧洲' },
                { value: 274, name: '美洲' },
                { value: 235, name: '澳洲' },
                { value: 400, name: '亚洲' }
              ].sort(function (a, b) {
                return a.value - b.value;
              }),
              label: {
                color: '#34495e', // 深蓝色
              },
              labelLine: {
                lineStyle: {
                  color: '#34495e', // 深蓝色
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ],
        };
        echarts.init(roundCake.value).setOption(option);
      }

      //优化折线图
      if(beautybrokenLine){
        const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
        const option = {
          backgroundColor: '#fff',
          title: {
            text: '6月销售统计',
            textStyle: {
              fontSize: 12,
              fontWeight: 400
            },
            left: 'center',
          },
          legend: {
            icon: 'circle',
            top: '5%',
            right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: '#556677'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0
              }
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
          },
          
          
          grid: <echarts.GridComponentOption>{
            top: '15%'
          },
          xAxis: [{
            type: 'category',
            data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾', '南宁', '海外'],
            axisLine: {
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#556677'
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 15
            },
            axisPointer: {
              label: {
                // padding: [11, 5, 7],
                padding: [0, 0, 10, 0],
                /*
                  除了padding[0]建议必须是0之外，其他三项可随意设置

                  和CSSpadding相同，[上，右，下，左]

                  如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

                  padding[2]的10:

                  10 = 文字距下边线的距离 + 下边线的宽度

                  如：UI图中文字距下边线距离为7 下边线宽度为2

                  则padding: [0, 0, 9, 0]

                */
                // 这里的margin和axisLabel的margin要一致!
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#fff' // 0% 处的颜色
                  }, {
                    // offset: 0.9,
                    offset: 0.86,
                    /*
                      0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                    */
                    color: '#fff' // 0% 处的颜色
                  }, {
                    offset: 0.86,
                    color: '#33c0cd' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#33c0cd' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            boundaryGap: false
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#556677'
              }
            },
            splitLine: {
              show: false
            }
          }, {
            type: 'value',
            position: 'right',
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#556677'
              },
              formatter: '{value}'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            splitLine: {
              show: false
            }
          }],
          dataZoom: <echarts.DataZoomComponentOption[]>[{ type: 'inside', start: 0, end: 100 }],
          series: [
            {
              name: 'Adidas',
              type: 'line',
              data: [10, 10, 30, 12, 15, 3, 7, 9, 8],
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#9effff'
                },
                {
                  offset: 1,
                  color: '#9E87FF'
                }
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[0],
                  borderColor: colorList[0]
                }
              }
            },
            {
              name: 'Nike',
              type: 'line',
              data: [5, 12, 11, 14, 25, 16, 10, 19, 25],
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                  offset: 0,
                  color: '#73DD39'
                },
                {
                  offset: 1,
                  color: '#73DDFF'
                }
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[1],
                  borderColor: colorList[1]
                }
              }
            },
            {
              name: '老北京布鞋',
              type: 'line',
              data: [150, 120, 170, 140, 500, 160, 110, 95, 165],
              symbolSize: 1,
              yAxisIndex: 1,
              symbol: 'circle',
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#fe9a'
                },
                {
                  offset: 1,
                  color: '#fe9a8b'
                }
                ]),
                shadowColor: 'rgba(254,154,139, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[2],
                  borderColor: colorList[2]
                }
              }
            }
          ]
        }
        echarts.init(beautybrokenLine.value).setOption(option);
      }

      //优化饼图
      if(!!beautyroundCake.value){
        const colorList = [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 1,
            y: 1,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FDB36ac2' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#FECE4391' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          }
        ];
        const colorLine: string[] = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43'];

        const getRich = () => {
          let result: any = {};
          colorLine.forEach((v, i) => {
            result[`hr${i}`] = {
              backgroundColor: colorLine[i],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12]
            }
            result[`a${i}`] = {
              padding: [8, -60, -20, -20],
              color: colorLine[i],
              fontSize: 12
            }
          })
          return result;
        };

        const data : Array<{name: string, value: number, labelLine?: any}> = [
          {
            name: '北京',
            value: 25,
          },
          {
            name: '上海',
            value: 20,
          },
          {
            name: '广州',
            value: 18
          }, 
          {
            name: '深圳',
            value: 15
          }, 
          {
            name: '未知',
            value: 13
          }, 
          {
            name: '海外',
            value: 9
          }
        ].sort((a, b) => {
          return b.value - a.value;
        });
        (data || []).forEach((v, i) => {
          v.labelLine = {
            lineStyle: {
              width: 1,
              color: colorLine[i]
            }
          }
        });
        const option: EChartsOption = {
          series: [{
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              formatter: function (params) {
                const name = params.name
                const percent = params.percent + '%'
                const index = params.dataIndex
                return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
              },
              rich: getRich()
            },
            itemStyle: <any>{
              normal: {
                color: function (params: any) {
                  return colorList[params.dataIndex]
                }
              }
            },
            data,
            roseType: 'radius'
          }]
        };
        echarts.init(beautyroundCake.value).setOption(option);
      }

      const handleResize = () => (columnarChart as unknown as ECharts)?.resize();
      window.addEventListener('resize', handleResize);

      // 清理时移除事件监听
      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
        (columnarChart as unknown as ECharts)?.dispose();
      });
    };

    //环境数据监测
    const getWeatherData = () => {
      if (!!weather.value){
        const option = {
        title: {
          text: '☁️环境质量综合监测',
          left: 'center',
          textStyle: {
            color: '#2c3e50',
            fontSize: 22,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderWidth: 1,
          borderColor: '#ddd',
          textStyle: {
            color: '#333'
          },
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          top: 40,
          data: ['温度', '湿度', 'PM2.5', 'AQI'],
          textStyle: {
            color: '#666'
          }
        },
        toolbox: {
          top: 35,
          right: 30,
          feature: {
            saveAsImage: {
              title: '保存图片',
              pixelRatio: 2
            },
            dataView: { show: true, readonly: false}, //数据视图
            magicType: {show: true, type: ['line', 'bar']}, //动态切换
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {}
          }
        },
        grid: {
          top: 100,
          left: 60,
          right: 60,
          bottom: 40,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        }],
        yAxis: [{
          type: 'value',
          name: '温度(℃)/湿度(%)',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#666',
            formatter: '{value}'
          }
        }, {
          type: 'value',
          name: 'PM2.5/AQI',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#666',
            formatter: '{value}'
          }
        }],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#e74c3c'
            },
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(231,76,60,0.3)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(231,76,60,0.4)'
              }, {
                offset: 1,
                color: 'rgba(231,76,60,0.05)'
              }])
            },
            data: [18, 16, 20, 26, 28, 24, 20]
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#3498db'
            },
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(52,152,219,0.3)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(52,152,219,0.4)'
              }, {
                offset: 1,
                color: 'rgba(52,152,219,0.05)'
              }])
            },
            data: [65, 70, 60, 45, 40, 55, 68]
          },
          {
            name: 'PM2.5',
            type: 'bar',
            yAxisIndex: 1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#2ecc71'
              }, {
                offset: 1,
                color: '#27ae60'
              }]),
              borderRadius: [6, 6, 0, 0]
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(46,204,113,0.5)',
                shadowBlur: 10
              }
            },
            data: [35, 42, 68, 85, 55, 48, 38]
          },
          {
            name: 'AQI',
            type: 'scatter',
            yAxisIndex: 1,
            symbolSize: 20,
            itemStyle: {
              color: '#f1c40f',
              shadowBlur: 10,
              shadowColor: '#f39c12'
            },
            data: [45, 50, 70, 90, 60, 55, 45]
          }
        ],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }]
      };
      echarts.init(weather.value).setOption(option);
      }

      // 窗口变化自适应
      const handleResize = () => (columnarChart as unknown as ECharts)?.resize();
      window.addEventListener('resize', handleResize);

      // 清理时移除事件监听
      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
        (columnarChart as unknown as ECharts)?.dispose();
      });
    }

    // 生命周期钩子
    onMounted(() => {
      getEchartData();
      getWeatherData();
    });

    return {stats, cardList, columnar, brokenLine, roundCake, beautyroundCake, beautybrokenLine, weather, columnarChart};
  }
});
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
}

.section-title {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #3498db;
  display: inline-block;
}

.section-title:hover{
  transform: translateY(-5px);
}

.chart-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.chart-card:hover {
  transform: translateY(-5px);
}

.chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.chart-icon {
  font-size: 1.5rem;
  margin-right: 12px;
}

.chart-name {
  font-size: 1.2rem;
  color: #34495e;
  margin: 0;
}

.chart-container {
  height: 320px;
}

.mixed-chart {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.combined-chart {
  height: 580px;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 20px;
  transition: transform 0.3s ease;
}

.combined-chart:hover {
  transform: translateY(-5px);
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .chart-group {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .chart-container {
    height: 280px;
  }
}


/* 基础样式 */
.dashboard-container {
  padding: 24px;
  min-height: 100vh;
  background-color: #f9fafb;
}

.dashboard-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 32px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 卡片通用样式 */
.stats-card {
  position: relative;
  padding: 50px;
  border-radius: 16px;
  color: white;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.stats-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 卡片背景渐变 */
.department-card {
  background: linear-gradient(to bottom right, #3b82f6, #60a5fa);
}

.employee-card {
  background: linear-gradient(to bottom right, #10b981, #34d399);
}

.intern-card {
  background: linear-gradient(to bottom right, #8b5cf6, #a78bfa);
}

.vacancy-card {
  background: linear-gradient(to bottom right, #f97316, #fb923c);
}

/* 图标容器 */
.icon-container {
  position: absolute;
  top: 16px;
  right: 16px;
  opacity: 0.2;
}

.icon-container i {
  font-size: 1.875rem;
}

/* 文字容器 */
.text-container {
  position: relative;
  z-index: 10;
}

.number {
  font-size: 3.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.label {
  font-size: 1.125rem;
  opacity: 0.9;
}

/* 趋势标签 */
.trend-badge {
  position: absolute;
  bottom: 16px;
  left: 400px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 1.275rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 迷你趋势线 */
.sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
}

/* 状态圆点 */
.status-dot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.8);
}

/* 角落装饰 */
.corner-decoration {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 悬浮动画 */
.stats-card:hover .icon-container {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>